<template>
  <el-card class="account-container">
    <el-form :model="nameForm" :rules="rules" ref="nameRef" label-width="80px" label-position="right"
             class="demo-ruleForm">
      <el-form-item label="登录名：" prop="loginName">
        <el-input style="width: 200px" v-model="nameForm.username"></el-input>
      </el-form-item>
      <el-form-item label="昵称：" prop="nickname">
        <el-input style="width: 200px" v-model="nameForm.nickname"></el-input>
      </el-form-item>
      <el-form-item label="手机号：" prop="phoneNumber">
        <el-input style="width: 200px" v-model="nameForm.phoneNumber"></el-input>
      </el-form-item>
      <el-form-item label="邮箱：" prop="mail">
        <el-input style="width: 200px" v-model="nameForm.mail"></el-input>
      </el-form-item>
      <el-form-item label="专业：" prop="major">
        <el-input style="width: 200px" v-model="nameForm.major"></el-input>
      </el-form-item>
      <el-form-item label="专业：" prop="major">
        <el-input style="width: 200px" v-model="nameForm.major"></el-input>
      </el-form-item>
      <el-form-item label="头像：" prop="avatar">
        <el-upload
            class="avatar-uploader"
            action="/api/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :headers=updateHeader
        >
          <img v-if="nameForm.avatar" :src="nameForm.avatar" style="height:40px;width: 40px" class="avatar" alt=""/>
          <el-icon v-else class="avatar-uploader-icon">
            <Plus/>
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="submitName">确认修改</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card class="account-container">
    <el-form :model="passForm" :rules="rules" ref="passRef" label-width="80px" label-position="right"
             class="demo-ruleForm">
      <el-form-item label="原密码：" prop="oldPassword">
        <el-input style="width: 200px" v-model="passForm.oldPassword"></el-input>
      </el-form-item>
      <el-form-item label="新密码：" prop="password">
        <el-input style="width: 200px" v-model="passForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="submitPass">确认修改</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import {onMounted, reactive, ref, toRefs} from 'vue'
import axios from '@/utils/axios'
import {ElMessage,ElIcon} from 'element-plus'
import {updateHeader} from "@/utils";
import {Plus} from "@element-plus/icons-vue";

export default {
  name: 'Account',
  components:{
    Plus,
    ElIcon
  },
  setup() {
    const nameRef = ref(null)
    const passRef = ref(null)
    const state = reactive({
      user: null,
      nameForm: {
        username: '',
        nickname: '',
        phoneNumber: '',
        mail: '',
        major: '',
        avatar: ''
      },
      passForm: {
        ordPassword: '',
        password: ''
      },
      rules: {
        username: [
          {required: 'true', message: '登录名不能为空', trigger: ['change']}
        ],
        nickName: [
          {required: 'true', message: '昵称不能为空', trigger: ['change']}
        ],
        ordPassword: [
          {required: 'true', message: '原密码不能为空', trigger: ['change']}
        ],
        password: [
          {required: 'true', message: '新密码不能为空', trigger: ['change']}
        ]
      },
    })
    onMounted(() => {
      axios.get('/evaluate/user/info').then(res => {
        state.user = res
        state.nameForm = {...res}
      })
    })
    const submitName = () => {
      nameRef.value.validate((vaild) => {
        if (vaild) {
          axios.put('/evaluate/user', {
            ...state.nameForm
          }).then(() => {
            ElMessage.success('修改成功')
            window.location.reload()
          })
        }
      })
    }
    const submitPass = () => {
      passRef.value.validate((vaild) => {
        if (vaild) {
          axios.put('/user/password', {
            oldPassword: state.passForm.oldPassword,
            password: state.passForm.password
          }).then(() => {
            ElMessage.success('修改成功')
            window.location.reload()
          })
        }
      })
    }

    // 上传图片
    const handleAvatarSuccess = (response, uploadFile) => {
      let src = response.data.src;
      state.nameForm.avatar = "/api" + src
    }
    return {
      ...toRefs(state),
      nameRef,
      passRef,
      updateHeader,
      handleAvatarSuccess,
      submitName,
      submitPass
    }
  }
}
</script>

<style>
.account-container {
  margin-bottom: 20px;
}
</style>